<template>
    <el-row>
      <el-col :span="24">
        <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px"
                 style="width: 400px; margin-left:50px;">
          <el-form-item label="店铺名称" prop="name">
            <el-input v-model="dataForm.name"/>
          </el-form-item>
          <el-form-item label="店铺类型" prop="storeType">
            <el-radio-group v-model="dataForm.storeType">
              <el-radio-button label="0">普通</el-radio-button>
              <el-radio-button label="1">村社</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="选择地址" prop="storeType">
            <el-row style="width: 200%;">
              <el-col :span="4">
                <el-select v-if="listCity[0].length > 0" v-model="dataForm.provinceId" @change="changeCity(0)" placeholder="请选择省">
                  <el-option
                    v-for="item in listCity[0]"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-select v-if="listCity[1].length > 0" v-model="dataForm.citiesId" @change="changeCity(1)" placeholder="请选择市">
                  <el-option
                    v-for="item in listCity[1]"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-select v-if="listCity[2].length > 0" v-model="dataForm.areasId"
                           @change="changeCity(2)" placeholder="请选择县">
                  <el-option
                    v-for="item in listCity[2]"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-select v-if="listCity[3].length > 0" v-model="dataForm.streetsId"
                           @change="changeCity(3)" placeholder="请选择区">
                  <el-option
                    v-for="item in listCity[3]"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-select v-if="listCity[4].length > 0" v-model="dataForm.villagesId"
                           placeholder="请选择村">
                  <el-option
                    v-for="(item,index) in listCity[4]"
                    :key="index"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="封面" prop="coverLink">
            <Upload :links="link" :size="1" :accept="'.jpg,.jpeg,.png,.gif'"></Upload>
          </el-form-item>
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="dataForm.contacts"/>
          </el-form-item>
          <el-form-item label="手机号" prop="phoneCode">
            <el-input v-model="dataForm.phoneCode"/>
          </el-form-item>
          <el-form-item label="详细地址">
            <el-input v-model="dataForm.address"/>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="dataForm.remark"/>
          </el-form-item>
          <div>
            <el-button @click="cancel">取消</el-button>
            <el-button v-if="!dataForm.id" type="primary" @click="createData">确定</el-button>
            <el-button v-else type="primary" @click="updateData">确定</el-button>
          </div>
        </el-form>
      </el-col>
    </el-row>
</template>

<script>
import { create, update } from '@/api/apiShop'
import { list } from '@/api/apiRegion'
import upload from '@/components/upload/index'
export default {
  name: 'add',
  props: ['dataForm','cancel'],
  components: {
    Upload: upload
  },
  data(){
    return {
      rules: rules,
      listCity: [[],[],[],[],[]],
      link: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs['dataForm'].clearValidate()
    })
    this.initData()
  },
  methods: {
    changeCity(index,isInit = false) {
      let self = this
      let pid = undefined
      switch(index){
        case 0: pid=self.dataForm.provinceId;break
        case 1: pid=self.dataForm.citiesId;break
        case 2: pid=self.dataForm.areasId;break
        case 3: pid=self.dataForm.streetsId
      }
      if (pid == undefined) return false
      // 如果传0清空1234，传1清空234，传2清空34，传3，清空4
      if(!isInit){
        for (let i = index;i < 4;i++){
          this.listCity[i+1].length = 0
          switch (i) {
            case 0: self.dataForm.citiesId = undefined;break
            case 1: self.dataForm.areasId = undefined;break
            case 2: self.dataForm.streetsId = undefined;break
            case 3: self.dataForm.villagesId = undefined
          }
        }
      }
      this.initCityData(index + 1,pid)
    },
    initData(){
      this.initCityData(0);
      this.initFromData();
    },
    initCityData(type,pid){ // 城市数据初始化
      list({getTpye: type,pid: pid}).then(res => {
        this.listCity[type].length = 0
        this.listCity[type].push.apply(this.listCity[type],res.data.data)
        this.changeCity(type,true)
      })
    },
    initFromData(){ // 表单数据初始化
      if(this.dataForm.coverLink){
        this.link = JSON.parse(this.dataForm.coverLink)
      }
    },
    createData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          create({...this.dataForm,...{coverLink: JSON.stringify(this.link)}}).then(response => {
            this.$notify.success({
              title: '成功',
              message: '创建成功'
            })
            this.cancel()
          })
        }
      })
    },
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          update({...this.dataForm,...{coverLink: JSON.stringify(this.link)}}).then(() => {
            this.$notify.success({
              title: '成功',
              message: '更新人文成功'
            })
            this.cancel()
          })
        }
      })
    }
  }
}


const rules = {
  name: [
    { required: true, message: '店铺名称不能为空', trigger: 'blur' }
  ],
  storeType: [
    { required: true, message: '店铺类型不能为空', trigger: 'blur' }
  ],
  contacts: [
    { required: true, message: '联系人不能为空', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '详细地址不能为空', trigger: 'blur' }
  ],
  phoneCode: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    {
      pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
      message: '手机号格式不对',
      trigger: 'blur'
    }
    ]
}



</script>

<style scoped>

</style>
